import { extendClass } from '../../utils/index'
import { DIRECTION_LEFT, DIRECTION_RIGHT, SPCIES_TYPE } from '../../constant/index'
import store from '../../store/index'
import Animation from '../base/animation'
import { getCloudUrl } from '../../utils'
import { getCanvas } from '../../../ctx/index'
import { getStaticState } from '../../../../../state/static-store'



const BULLET_IMG_SRC = getCloudUrl('images/pua-1.png')
const BULLET_WIDTH = 50 * 2
const BULLET_HEIGHT = 50 * 2
const REMOVE_TIME_WIDTH = 90 * 2
const REMOVE_TIME_HEIGHT = 60 * 2
/**
 * 偏移量
 */
const OFFSET_VELOCITY = 10
const PUA_STATAE = {
  hang: 1,
  move: 2,
  explosion: 3
}
export default class Spcies extends Animation {
  constructor() {
    super(BULLET_IMG_SRC, BULLET_WIDTH, BULLET_HEIGHT)
  }

  init(x, y, speed) {
    this.x = x
    this.y = y

    this.speed = speed
    /**
     * 是否可见
     */
    this.visible = true
    /**
     * 是否未挂在绳子上
     */
    this.isFall = false
    /**
     * 是否暂停下落
     */
    this.suspend = false
    /**
     * 下落时的角度
     */
    this.fallAngle = 0
    /**
     * 下落时的透明度
     */
    this.globalAlpha = 1
    /**
     * 下落时的方向
     */
    this.direction = ''
    /**
     * 偏移速度
     */
    this.migrationVelocity = 3
    /**
     * 是否反向
     */
    this.reverseDirection = false
    /**
     * 状态
     */
    this.currentState = PUA_STATAE.hang
    this.money = this.createdMoney()
    this.img.src = SPCIES_TYPE[this.type].src
    this.interval = 2000
    this.initExplosionAnimation()
    extendClass(this)
  }
  /**
   * 设置爆炸尺寸
   */
  setRemoveBgSize() {
    this.width = REMOVE_TIME_WIDTH
    this.height = REMOVE_TIME_HEIGHT
    this.x = this.x - (REMOVE_TIME_WIDTH - BULLET_WIDTH) / 2
    this.y = this.y - (REMOVE_TIME_HEIGHT - BULLET_HEIGHT) / 2
  }
  createdMoney() {
    // const list = Object.values(GOLD_TYPE)
    // const index = Math.floor(Math.random() * list.length)
    // return list[index] || GOLD_TYPE.one
    return 1
  }
  // 销毁
  destroy(list = store.golds, index = -1) {
    if (index !== -1) {
      list.splice(index, 1)
    } else {
      list.splice(list.indexOf(this), 1)
    }
    store.haveGolds.push(this)
    this.removeMoveGold()
  }
  /**
   * 从运动数组中移除当前组件
   */
  removeMoveGold() {
    store.moveGolds.splice(store.moveGolds.indexOf(this), 1)
  }
  /**
   * 更新方向
   */
  updateCollideWithWallDirection () {
    if (this.isCollideWithWallLeft()) {
      this.setDirection(DIRECTION_RIGHT)
    }
    if (this.isCollideWithWallRight()) {
      this.setDirection(DIRECTION_LEFT)
    }
  }
    /**
   * 位置偏移
   */
  positionOffset () {
    this.migrationVelocity = Math.abs(OFFSET_VELOCITY * (Math.abs(this.rotate) / 100) + Math.abs(this.rotate / 20))
    this.speed += this.migrationVelocity / 100

    if (this.direction === DIRECTION_RIGHT) {
      this.setX(this.x + this.migrationVelocity)
    }

    if (this.direction === DIRECTION_LEFT) {
      this.setX(this.x - this.migrationVelocity)
    }
  }
  // 每一帧更新位置
  update() {
    if (!this.suspend && this.isFall) {
      if (this.currentState !== PUA_STATAE.move) {
        this.currentState = PUA_STATAE.move
        this.img.src = getCloudUrl('images/pua-2.png')
      }
      this.positionOffset()
      /**
       * 下落时重力加速度
       */
      this.setY(this.y + this.speed)
      this.setSpeed(this.speed + this.speed / 50)
    }

  }
  anCallback() {
    if (this.suspend) {
      this.anTimer = setInterval(() => {
        this.globalAlpha =  this.globalAlpha - 0.015
        if (this.globalAlpha <= 0) {
          this.globalAlpha = 0
          clearInterval(this.anTimer)
        }
      }, 1000 / 60);
    }
  }
  
  /**
   * 预定义爆炸的帧动画
   */
  initExplosionAnimation() {
    const frames = [getCloudUrl(`images/pua-3.png`)]
    this.initFrames(frames)
  }
  // 将播放中的帧绘制到canvas上
  aniRender(ctx) {
    ctx.globalAlpha = this.globalAlpha;
    ctx.drawImage(
      this.imgList[this.index],
      this.x,
      this.y,
      this.width * 1.2,
      this.height * 1.2
    )
    ctx.globalAlpha = 1.0;
  }
  End () {
    this.setSuspend(true)
    this.playAnimation()
    this.setRemoveBgSize()
    this.anCallback()
  }
  /**
   * 将精灵图绘制在canvas上
  */
  render(ctx) {
    if (!this.visible) return

    ctx.drawImage(
      this.img,
      this.x,
      this.y,
      this.width,
      this.height
    )
  }
  

}
